<template>
	<el-card shadow="hover">
		<template v-slot:header>
			人员外出
			<div style="float: right;display: inline-flex;color: #FFFFFF;">
				<sc-icon style="cursor: pointer;width: 18px; margin-right: 10px;" @click="reLoad" title="刷新">
					<el-icon-refresh-right/>
				</sc-icon>
			</div>
		</template>
		<div style="height: 210px;">
			<el-table :data="recordList" style="width: 100%" :show-header="false" class="customer-table">
				<el-table-column prop="userName" :show-overflow-tooltip="true">
					<template #default="scope">
						<span v-if="scope.row.outType=='0'" style="font-weight: 500">【外出】</span>
						<span v-if="scope.row.outType=='1'" style="font-weight: 500">【出差】</span>
						{{ scope.row.userName }}
					</template>
				</el-table-column>
				<el-table-column prop="beginTime" width="180" align="center" :show-overflow-tooltip="true">
					<template #default="scope">
						{{ scope.row.deptName }} {{ scope.row.levelName }}
					</template>
				</el-table-column>
				<el-table-column prop="beginTime" width="180" align="center" :show-overflow-tooltip="true">
					<template #default="scope">
						{{ scope.row.beginTime }}~{{ scope.row.endTime }}
					</template>
				</el-table-column>
				<el-table-column prop="address" width="180" align="right" :show-overflow-tooltip="true">
					<template #default="scope">
						{{ scope.row.address }}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-card>
</template>

<script>
export default {
	components: {
	},
	data() {
		return {
			recordList: [],
			timer: null
		}
	},
	created() {
		clearInterval(this.timer)
		this.timer = null
	},
	beforeUnmount() {
		clearInterval(this.timer);
		this.timer = null
	},
	mounted() {
		this.getAllUserOutForWeek();
		this.setTimer();
	},
	methods: {
		reLoad() {
			this.getAllUserOutForWeek();
		},
		async getAllUserOutForWeek() {
			var res = await this.$API.system.userOut.getAllUserOutForWeek.get();
			if (res.code == 200) {
				this.recordList = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		setTimer() {
			if (this.timer == null) {
				this.timer = setInterval(() => {
					this.getAllUserOutForWeek();
				}, this.$TOOL.data.get("MSG_TIME"))
			}
		}
	}
}
</script>
<style scoped>
:deep(.el-card__header) {
	background: rgba(64, 158, 255, 0.6);
	color: white;
	padding: 10px 20px 10px 20px;
}

:deep(.el-table tr) {
	cursor: pointer;
}

.customer-table th {
	border: none;
}

.customer-table td, .customer-table th.is-leaf {
	border: none;
}

.el-table--border, .el-table--group {
	border: none;
}

.customer-table thead tr th.is-leaf {
	border: 1px solid #EBEEF5;
	border-right: none;
}

.customer-table thead tr th:nth-last-of-type(2) {
	border-right: 1px solid #EBEEF5;
}

.el-table--border::after, .el-table--group::after {
	width: 0;
}

.customer-table::before {
	width: 0;
}

.customer-table .el-table__fixed-right::before, .el-table__fixed::before {
	width: 0;
}

.el-table--border th.gutter:last-of-type {
	border: 1px solid #EBEEF5;
	border-left: none;
}
</style>
